﻿@page "/validateforms"

<h3>ValidateForm 表单组件</h3>

<h4>可供数据合规检查的表单组件</h4>

<Block Title="基础用法" Introduction="放置到 <code>ValidateForm</code> 中的组件提交时自动进行数据合规检查">
    <p>组件说明：</p>
    <ul class="ul-demo">
        <li>表单事件为 <code>OnSubmit</code> <code>OnValidSubmit</code> <code>OnInvalidSubmit</code></li>
        <li>当使用 <code>OnSubmit</code> 时其他两种不可以同时使用</li>
        <li>本例中使用了 <code>OnSubmit</code> 回调委托无论客户端验证是否通过均显示结果</li>
        <li><code>Model</code> 参数为必填项不允许为空</li>
        <li>表单内可以放置多个按钮，通过设置 <code>ButtonType="ButtonType.Submit"</code> 参数是否提交表单</li>
        <li>客户端验证机制支持模型的 <code>Required</code> 标签，通过设置 <code>ErrorMessage</code> 参数设置提示信息，未设置时使用默认的英文提示信息</li>
        <li>表单默认检查表单内绑定字段值是否合法，如需要检查模型所有字段时可设置 <code>ValidateAllProperties</code> 属性值为 <code>true</code></li>
    </ul>
    <p>注意事项：</p>
    <ul class="ul-demo">
        <li>表单内组件通常用法都是使用双向绑定技术对 <code>Model</code> 的属性值进行双向绑定，当其值改变时会导致所在组件 <code>StateHasChanged</code> 方法被调用，即其所在组件或者页面进行刷新重新渲染</li>
    </ul>
    <div class="form-demo">
        <ValidateForm class="form-inline" Model="@Model" OnInvalidSubmit="@OnInvalidSubmit1">
            <div class="row">
                <div class="form-group col-12">
                    <BootstrapInput @bind-Value="@Model.Name" />
                </div>
                <div class="form-group col-12">
                    <Button ButtonType="ButtonType.Submit" Text="提交表单" />
                </div>
            </div>
        </ValidateForm>
        <Logger @ref="Trace" />
    </div>
</Block>

<Block Title="内置组件" Introduction="放置支持表单组件到 <code>ValidateForm</code> 中">
    <div class="form-demo">
        <label class="legend">支持表单验证的组件示例</label>
        <p>示例说明</p>
        <ul>
            <li>姓名为字符串类型</li>
            <li>年龄为整数类型</li>
            <li>生日为时间类型</li>
            <li>教育为枚举类型</li>
            <li>爱好为集合类型</li>
        </ul>
        <ValidateForm class="form-inline" Model="@Model" OnValidSubmit="@OnValidSubmit" OnInvalidSubmit="@OnInvalidSubmit">
            <div class="row">
                <div class="form-group col-12 col-sm-6">
                    <BootstrapInput @bind-Value="@Model.Name" />
                </div>
                <div class="form-group col-12 col-sm-6">
                    <BootstrapInputNumber @bind-Value="@Model.Count" />
                </div>
                <div class="form-group col-12 col-sm-6">
                    <DateTimePicker @bind-Value="@Model.DateTime" />
                </div>
                <div class="form-group col-12 col-sm-6">
                    <Select Items="@Educations" @bind-Value="@Model.Education" />
                </div>
                <div class="form-group col-12">
                    <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
                </div>
                <div class="form-group col-12">
                    <Button ButtonType="@ButtonType.Submit" Text="提交表单" />
                </div>
            </div>
        </ValidateForm>
        <Logger @ref="Trace2" class="mt-3" />
    </div>
</Block>

<Block Title="自定义显示错误信息" Introduction="通过调用 <code>SetError</code> 方法设置自定义错误信息">
    <p>
        <b>应用场景</b>
        <div>客户端验证通过后进行数据库保存操作，如果出现其他问题，后仍然可以进行表单自定义错误提示，本例中数据验证合法后，点击 <code>提交表单</code> 按钮后，姓名字段会显示 <code>数据库中已存在</code> 这样的自定义提示信息</div>
    </p>
    <ValidateForm class="form-inline" Model="@Model">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <BootstrapInputNumber @bind-Value="@Model.Count" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <DateTimePicker @bind-Value="@Model.DateTime" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select Items="@Educations" @bind-Value="@Model.Education" />
            </div>
            <div class="form-group col-12">
                <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
            </div>
            <div class="form-group col-12">
                <Button ButtonType="@ButtonType.Submit" Text="提交表单" />
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="验证所有字段值" Introduction="此组件默认检查表单内模型绑定字段值，如需要检查模型所有字段值时设置 <code>ValidateAllProperties</code> 值">
    <p>本例中未放置 <code>Address</code>，由于设置 <code>ValidateAllProperties</code> 参数值为 <code>true</code>，所以 <code>Address</code> 字段仍然被检查，及时表单内所有数据均合法后，提交数据时仍然触发 <code>OnInvalidSubmit</code> 回调委托</p>
    <ValidateForm class="form-inline" Model="@Model" OnInvalidSubmit="@OnInvalidSubmitAddress" ValidateAllProperties="true">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <BootstrapInput @bind-Value="@Model.Name" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <BootstrapInputNumber @bind-Value="@Model.Count" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <DateTimePicker @bind-Value="@Model.DateTime" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <Select Items="@Educations" @bind-Value="@Model.Education" />
            </div>
            <div class="form-group col-12">
                <CheckboxList @bind-Value="@Model.Hobby" Items="@Hobbys" />
            </div>
            <div class="form-group col-12">
                <Button ButtonType="@ButtonType.Submit" Text="提交表单" />
            </div>
        </div>
    </ValidateForm>
    <Logger @ref="Trace3" class="mt-3" />
</Block>

<Block>
    <p>本示例中绑定的是一个超级复杂类型 <code>ComplexModel.Dummy.Dummy2.Name</code> 清空值后，点击 <b>提交表单</b> 会对数据进行验证</p>
    <ValidateForm class="form-inline" @ref="Test" Model="@ComplexModel" OnInvalidSubmit="@OnInvalidComplexModel" OnValidSubmit="@OnValidComplexModel">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <BootstrapInput @bind-Value="@ComplexModel.Name" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <BootstrapInput @bind-Value="@ComplexModel.Dummy.Dummy2.Name" />
            </div>
            <div class="form-group col-12">
                <Button ButtonType="@ButtonType.Submit" Text="提交表单" />
            </div>
        </div>
    </ValidateForm>
    <Logger @ref="Trace4" class="mt-3" />
</Block>

<AttributeTable Items="@GetAttributes()" />

<MethodTable Items="@GetMethods()" />
